<!--违规行为一览_可视化统计-->
<script setup>
import axios from "axios";
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
// import { useRoute } from 'vue-router'
import MyDatePicker from '../components/MyDatePicker'
import StationSelector from '../components/StationSelector'
import OperaHeader from '../components/OperaHeader'
import * as echarts from "echarts";


var role = localStorage.getItem("role") == 1 ? "central" : localStorage.getItem("role") == 2 ? "branch" : "petrol";
var belong = localStorage.getItem('belong')
var status = ref('central')


const radio1 = ref('当天')
var flag = ref(1)

const dateData = ref([])
const staffIds = ref([])
const typeValue = ref(1)
const MAX = 7
const handleSearch = async () => {
  const obj = {
    start: dateData.value?.[0],
    end: dateData.value?.[1],
    staffIds: staffIds.value,
    p2limit: MAX
  }
  const params = new URLSearchParams(obj).toString()
  const res = await axios.get(`/system/violation/visual?${params}`)
  const {data, code, msg} = res.data
  if (code == 200) {
    const {first, second} = data
    init1(first)
    init3(second)
      ElMessage.success("查询成功")
  } else {
    ElMessage.error(msg)
  }
}
const handleSearch3 = async () => {
  const params = new URLSearchParams({
    start: dateData.value?.[0],
    end: dateData.value?.[1],
    staffIds: staffIds.value,
    type: typeValue.value
  })
  const res = await axios.get(`/system/violation/visual/p3?${params}`)
  const {data, code, msg} = res.data
  if (code == 200) {
    console.log(data);
    init2(data)
  } else {
    ElMessage.error(msg)
  }
}
const search = () => {
  handleSearch()
  handleSearch3()
}
const options = ref([])
const getOptions = async () => {
  try {
    const res = await axios.get(`/system/violation/basic`)
    const {data, code, msg} = res.data
    if (code === 200) {
      options.value = data.map(item => ({
        value: item.id,
        label: item.content
      }))
    } else {
      ElMessage.error(msg)
    }
  } catch (err) {
    ElMessage.error('网络错误')
  }
}
onMounted(() => {
  getOptions()
  search()
})

//图表1
const echart1 = ref()
function init1(data) {
  var eInfo0 = data
   
      var myChart1 = echarts.init(echart1.value);
      var option1 = {
        title: {
          text: '违规行为的类型分布',
          x: 'center',
          bottom: '50px',
        },
        tooltip: {
          trigger: 'item',
          left: 'left',
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          y: '30px',
          textStyle: {
            fontWeight: 700,
          }

        },
        series: [
          {
            name: '',
            type: 'pie',
            center: ['40%', '35%'],
            radius: '50%',
            data: [ ],
            //.value.map(d => d.value),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]

      };
      const yValues = Object.keys(data).map(item => {
        return {value: data[item], name: item}
      })
      option1.series[0].data = yValues
      myChart1.setOption(option1);
    

}

//图表2


const echart2 = ref()
function init2(data) {
 

      var myChart2 = echarts.init(echart2.value);
      var option2 = {
        tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   }
        },
        title: {
          text: '违规类型次数统计',
          x: 'center',
          // y: 'bottom',
          top: '-0px'
        },
        grid: {
          top: 30,
          bottom: 120,
          left: 30,
          x: 45,
          x2: 30,
          y2: 80,
        },

        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            show: true,
            fontSize: 12,
            rotate: -40,
            inside: false
          }
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [],
            type: 'bar',
            barWidth: 30
          }
        ]

      };
      const x = [], yValues = []
      Object.keys(data).forEach(item => {
        x.push(item)
        yValues.push(data[item])
      })
      option2.series[0].data = yValues
      option2.xAxis.data = x
      myChart2.setOption(option2);



}

// const optionb = [
//   {
//     value: 1,
//     label: '打电话',
//   },
//   {
//     value: 2,
//     label: '未正确摆放护栏',
//   },
//   {
//     value: 3,
//     label: '未带安全帽',
//   },
//   {
//     value: 4,
//     label: '发生火灾',
//   },
//   {
//     value: 5,
//     label: '卸油区有人',
//   },
// ]

// 图表3
const echart3 = ref()
const init3 = (data) => { 
  var myChart3 = echarts.init(echart3.value);
      var option3 = {
        title: {
          text: '违规类型次数统计',
          x: 'center',
          // y: 'bottom',
          bottom: '50px'
        },
        grid: {
          top: 30,
          bottom: 120,
          left: 30,
          x: 45,
          x2: 30,
          y2: 80,
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: [],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [],
            type: 'bar',
            barWidth: 30
          }
        ]

      };
      const x = [], yValues = []
      Object.keys(data).forEach(item => {
        x.push(item)
        yValues.push(data[item])
      })
      option3.series[0].data = yValues
      option3.xAxis.data = x
      myChart3.setOption(option3);
}

const changeRadio = function () {
  handleSearch3()
}


</script>

<template>
  <div>
    <OperaHeader @submit="search">
      <MyDatePicker v-model="dateData"></MyDatePicker>
      <StationSelector v-model="staffIds"></StationSelector>
    </OperaHeader>
  </div>
  <div class="bodyPagevSL">
    <div class="box">



      <div class="chart" ref="echart1" style="margin-right: 20px; float: left"></div>

    </div>
        <div class="box ">


      <div class="chart" ref="echart3" style="float: left; margin-left: 30px;"></div>
    </div>
    <div class="box3 box">
      <div style="float: left; margin-left: 20px; margin-top: 10px; color: #ffde59;">
        <el-select v-model="typeValue" class="m-2" placeholder="" size="" style="width: 150px" @change="changeRadio">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>


      <div class="chart" ref="echart2" style="float: left; margin-left: 30px;"></div>
    </div>
  </div>



</template>



<style scoped>
.bodyPagevSL {
  display: flex;
  justify-content: center;
  background-color: #f4f3f3;
  background-size: cover;
  z-index: -1;
  margin: auto;
  flex-wrap: wrap;
}

.chart {
  height: 400px;
  width: 90%;
  display: inline-block;
}

.box {
  height: 400px;
  width: 47%;
  background-color: #ffffff;
  display: inline-block;

  margin: auto 10px;
}
.box3 {
  transform: translateX(-50%);
  margin: 30px 0;
}
</style>
